<template>
	<view>
		<!-- {{ tabindex }} -->
		<!-- 首页 -->
		<view :class="['bg']">
			<!-- 搜索 -->
			<view class="white">
				<view class="search common" @tap="click">
					<template>
						<u-search placeholder="请输入搜索关键词" v-model="keyword" :clearabled="true" :show-action="false"></u-search>
					</template>
				</view>
			</view>
			<view :class="[color2]"></view>
			<!-- 搜索弹出层 -->
			<view>
				<view :class="[color, 'bg2']">
					<view class="white">
						<view class="search common">
							<u-search
								action-text="取消"
								v-model="keyword2"
								@input="inp"
								placeholder-color="#bbb"
								:placeholder="defaultKeyword.keyword"
								:clearabled="true"
								show-action
							></u-search>
							<view class="postxt" @tap="none"></view>
						</view>
						<view class="" v-if="!isShowsearch">
							<view class="hot" style="position: relative;">
								<view class="">历史记录</view>
								<view class="txt2">
									<text :class="['text']" v-for="(item, index) in historyKeywordList" :key="index" @tap="pushSearch(item)">{{ item }}</text>
								</view>
								<view class="" style="position: absolute;right: 40rpx;top: 10rpx;"><u-icon name="trash-fill" color="#999" size="20" @tap="clear"></u-icon></view>
							</view>
							<view class="hot">
								<view class="">热门搜索</view>
								<view class="txt2">
									<text :class="[index == 0 ? 'red' : '', 'text']" v-for="(item, index) in hotKeywordList" :key="index" @tap="pushSearch(item.keyword)">
										{{ item.keyword }}
									</text>
								</view>
							</view>
						</view>
						<!-- 
						 <view class="posblack" v-if="isShowsearch" >
						 		<view class="item" v-for="(item, index) in list" :key="index">
						 			<text>{{ item }}</text>
						 		</view>
						 	</view>
						 </view>
						 <view class="nomore"  v-if="isShowsearch">没有更多了</view>
						 -->
						<!-- 定位 -->
						<view v-if="isShowsearch">
							<view class="posblack">
								<view class="item" v-for="(item, index) in list" :key="index" @tap="pushSearch(item)">
									<text>{{ item }}</text>
								</view>
							</view>
							<view class="nomore">没有更多了</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-show="color == 'trans'">
				<!-- 轮播图 -->
				<view class="wrap2 white">
					<!-- {{ data }} -->
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular indicator-active-color="#1989FA">
						<swiper-item class="swiper_item" v-for="(item, index) in banner" :key="index">
							<view class="swiper-item"><image :src="item.image_url" mode="widthFix" alt="item.name"></image></view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 金刚区 | 频道宫格 -->
				<view class="channel">
					<u-grid :col="5" class="grid" :border="true">
						<u-grid-item v-for="(item, index) in channel" :key="index" class="grid_item" @tap="cla(item)">
							<u-icon :name="item.icon_url" :size="26"></u-icon>
							<view class="grid-text">{{ item.name }}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 布局 -->
				<!-- <u-col span="5"><view  class="demo-layout bg-purple-dark"></view></u-col> -->
				<!-- <view class="wrap ">
				<u-row gutter="16">
					<u-col span="6"><view class="demo-layout bg-purple"></view></u-col>
					<u-col span="6"><view class="demo-layout bg-purple-light"></view></u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="6"><view class="demo-layout bg-purple"></view></u-col>
					<u-col span="6"><view class="demo-layout bg-purple-light"></view></u-col>
				</u-row>
			</view> -->
				<view class="txt"><text>品牌制造商直供</text></view>
				<ul class="Brand">
					<!-- <li class="item" v-for="(item, index) in brandList" :key="index"></li> -->
					<li class="item" v-for="(item, index) in brandList" :key="index" @tap="pushIndetail(item.id)">
						<image :src="item.pic_url" mode="widthFix"></image>
						<view class="text">
							<p>{{ item.name }}</p>
							<text class="text2">￥{{ item.floor_price.toFixed(2) }}元</text>
						</view>
					</li>
				</ul>
				<!-- <view class="txt"><text>周一周四·新品首发</text></view>
			<view class="gird">
				<u-grid :col="2">
					<u-grid-item v-for="(item, index) in newGoodsList" :key="index">
						<u-icon :name="item.list_pic_url" :size="140"></u-icon>
						<view class="grid-text">{{ item.name }}</view>
						<view class="grid-text red">￥{{ item.retail_price.toFixed(2) }}元</view>
					</u-grid-item>
				</u-grid>
			</view> -->
				<view class="cd_good_title txt"><text>周一周四·新品首发</text></view>
				<mylist :list="newGoodsList"></mylist>

				<view class="txt"><text>人气推荐</text></view>
				<view class="hot">
					<div class="van-card item" v-for="(item, index) in hotGoodsList" :key="index">
						<div class="card_left">
							<a href="">
								<div class="van-image"><image :src="item.list_pic_url" alt="" /></div>
							</a>
						</div>
						<div class="van-card_right">
							<div class="title">
								<p>{{ item.name }}</p>
								<p>{{ item.goods_brief }}</p>
							</div>
							<div class="pri">{{ item.retail_price | toPrice }}</div>
						</div>
					</div>
				</view>
				<!-- 专题精选 -->
				<view class="txt"><text>专题精选</text></view>
				<!-- <scroll-view scroll-x="true" class="">
				<view class="srcoll_view">
					<view v-for="item in topicList" :key="item.id" class="scroll_item">
						<image :src="item.item_pic_url" mode=""></image>
						<text>{{ item.title + ' ' }}</text>
						<text>{{ item.price_info | toPrice }}</text>
						<text>{{ ' ' }}···</text>
						<view>{{ item.subtitle }}</view>
					</view>
				</view>
			</scroll-view> -->
				<!-- 专题精选 -->
				<u-scroll-list class="srcoll_view" indicator indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
					<view v-for="(item, index) in topicList" :key="index" class="scroll_item">
						<image :src="item.item_pic_url" mode=""></image>
						<text class="text1">{{ item.title + ' ' }}</text>
						<text class="text2">{{ item.price_info | toPrice }}</text>
						<text class="text3">{{ ' ' }}···</text>
						<view class="view">{{ item.subtitle }}</view>
					</view>
				</u-scroll-list>

				<!-- 列表 -->
				<!-- <view class="cd_good_area">
				<view class="cd_good_title txt"><text>居家</text></view>
				<view class="cd_good_list">
					<view class="cd_good_item" v-for="item in categoryList[0].goodsList" :key="item.id">
						<image :src="item.list_pic_url" mode="widthFix" class="cd_goods_item_img"></image>
						<view class="cd_goods_item_name">{{ item.name }}</view>
						<view class="cd_goods_item_price">{{ item.retail_price | toPrice }}</view>
					</view>
				</view>
			</view> -->
				<view class="" v-for="(item, index) in categoryList" :key="index">
					<view class="cd_good_title txt">
						<text>{{ item.name }}</text>
					</view>
					<mylist :list="item.goodsList"></mylist>
				</view>
			</view>
			<!-- <button @tap="btn">按钮</button> -->
			<tab></tab>
		</view>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import { ApiIndex, searchApi, goodsApi2, clearhistoryApi, helperApi } from '../../utils/api.js';
// import { toPrice } from '../../main.js';
import mylist from '../../components/mylist/mylist.vue';
import mysearch from '../../components/mysearch/mysearch.vue';
import { mapMutations, mapState } from 'vuex';
let timer = null;
export default {
	async onShow() {
		this.color = 'trans';
		this.color2 = 'white2';

		// this.$store.cmomit('changevalue', 1);
		this.changevalue(0);
		this.gethistory();

		let res1 = await ApiIndex();
		this.data = res1.data;
		let { banner, brandList, categoryList, channel, hotGoodsList, newGoodsList, topicList } = res1.data;
		console.log(this.data);
		this.banner = banner;
		this.brandList = brandList;
		this.categoryList = categoryList;
		this.channel = channel;
		this.hotGoodsList = hotGoodsList;
		this.newGoodsList = newGoodsList;
		this.topicList = topicList;
		this.getSearch();
	},
	computed: {
		...mapState(['tabindex'])
	},
	// filters: {
	// 	toPrice(val) {
	// 		return `￥${val.toFixed(2)}元`;
	// 	}
	// },
	components: {
		tab,
		mylist,
		mysearch
	},
	data() {
		return {
			isShowsearch: false,
			list: [],
			color2: '',
			tranbg: 'black',
			keyword: '',
			keyword2: '',
			color: 'trans',
			banner: [],
			brandList: [],
			categoryList: [],
			channel: [],
			hotGoodsList: [],
			newGoodsList: [],
			topicList: [],
			// 品牌详情页 - lhx
			hotKeywordList: [],
			historyKeywordList: [],
			defaultKeyword: {
				keyword: '520元礼包抢先领'
			}
		};
	},
	methods: {
		inp() {
			if (!this.isShowsearch) {
				this.isShowsearch = true;
			}
			console.log(this.keyword2);
			// 先取消上一次 等等延迟后再请求
			clearTimeout(timer);
			timer = setTimeout(() => {
				this.getSearch();
			}, 500);
		},
		async getSearch() {
			let token = uni.getStorageSync('token');
			let res = await helperApi(token, this.keyword2);
			console.log('getSearch', res);
			this.list = res.data;
			console.log('搜索记录');
		},
		async gethistory() {
			let res = await searchApi();
			console.log(res);
			this.defaultKeyword = res.data.defaultKeyword;
			this.historyKeywordList = res.data.historyKeywordList;
			this.hotKeywordList = res.data.hotKeywordList;
		},
		async clear() {
			let token = uni.getStorageSync('token');
			console.log(token);
			let res = await clearhistoryApi(token);
			console.log(res);
			this.historyKeywordList = res.data.historyKeywordList;
		},
		pushSearch(keyword) {
			uni.navigateTo({
				url: `/pages/searchList/searchList?keyword=${keyword}`
			});
		},
		...mapMutations(['changevalue']),
		click() {
			this.isShowsearch = false;
			console.log('click');
			this.color = 'zero';
			this.color2 = 'black2';
		},
		none() {
			console.log(1);
			console.log('none');
			this.color = 'trans';
			this.color2 = 'white2';
		},
		// 详情页点击跳转 - lhx
		toDetail(e) {
			uni.navigateTo({
				url: `/pages/brandDetailLhx/brandDetailLhx?id=${e.currentTarget.dataset.id}`
			});
		},
		cla(item) {
			console.log(1111);
			// uni.navigateTo({
			// 	url: `/pages/souyefenlei/souyefenlei?id=${item.id}`
			// });
			uni.navigateTo({
				url: `/pages/souyefenlei/souyefenlei?id=${item.id}`
			});
		},
		pushIndetail(id) {
			console.log(id);
			uni.navigateTo({
				url: `/pages/indetail/indetail?id=${id}`
			});
		},

		onLoad() {}
	}
};
</script>

<style lang="less" scoped>
.nomore {
	padding: 30rpx 0;
	border: 0;
	font-size: 34rpx;
	color: #777;
	text-align: center;
}
.posblack {
	background-color: #ffffff;
	.item {
		display: flex;
		box-sizing: border-box;
		width: 90%;
		padding: 20rpx 0px;
		margin: 0 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		box-sizing: border-box;
	}
	.item:last-child {
		border-bottom: none;
	}
}

.black2 {
	background-color: black;
	opacity: 0.8;
	transform: opacity 1s;
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	top: 0;
}

.white2 {
	background-color: black;
	opacity: 0;
	transform: opacity 1s;
	position: absolute;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	top: 0;
}

.bg {
	position: relative;

	.postxt {
		// background-color: #ccc;
		width: 90rpx;
		height: 70rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bg2 {
		width: 100vw;
		height: 100vh;
		background-color: #efefef;
		position: absolute;
		top: 0;
	}

	.zero {
		transform: translateX(0vw);
		transition: transform 0.8s ease-out;
		z-index: 1;
		position: absolute;
	}

	.trans {
		transform: translateX(100vw);
		transition: transform 0.8s ease-out;
		z-index: 1;
		position: absolute;
	}

	//

	.white {
		background-color: #fff;

		.search {
			margin: 0rpx 20rpx 0;
			padding: 26rpx 0;
			position: relative;
			z-index: 1;
		}

		.history {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 44rpx 30rpx 24rpx;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}

	.hot {
		background-color: #fff;
		padding: 20rpx 20rpx 50rpx;
		box-sizing: border-box;

		.txt2 {
			font-size: 30rpx;
			width: 100%;

			.red {
				color: #f40;
				border: 1px solid #f40;
			}

			text {
				border-radius: 8rpx;
				border: 1px solid #ccc;
				padding: 4rpx 10rpx;
				// height: auto !important;
				color: #aaa;
				margin-right: 20rpx;
				display: inline-block;
				margin-top: 20rpx;
			}
		}
	}

	//
	.txt {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		background-color: #fff;
	}

	// padding-bottom: 120rpx;
	.white {
		background-color: #fff;
	}

	background-color: #efefef;

	.search {
		margin: 20rpx 20rpx 0;
		padding: 26rpx 0;
	}

	.wrap2 {
		padding: 0rpx;
		height: 340rpx !important;
	}

	.swiper {
		height: 340rpx;

		.swiper_item {
			height: 340rpx;
		}

		.swiper-item {
			height: 340rpx;

			image {
				width: 100%;
			}
		}
	}

	.grid_item {
		padding: 30rpx 0 !important;
	}

	.channel {
		background-color: #fff;
		margin-bottom: 40rpx;
		padding: 20rpx 0;

		.grid-text {
			font-size: 20rpx;
			margin-top: 10rpx;
			// color: $u-type-info;
		}
	}

	.wrap {
		padding: 24rpx;

		.u-row {
			margin: 40rpx 0;
		}

		.demo-layout {
			height: 80rpx;
			border-radius: 8rpx;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}
	}

	.txt {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		background-color: #fff;
	}

	.Brand {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.text2 {
			color: #8b0000;
			// color: var(--price-color);
			margin: 10rpx;
			font-size: 34rpx;
		}

		li {
			list-style: none;
			position: relative;
		}

		background-color: #fff;

		.Title {
			margin: 0 auto;
		}

		// .littlebox {
		// 	position: relative;
		// }
		.item {
			width: 49%;
			margin-bottom: 6rpx;

			// height: 234rpx;
			image {
				width: 100%;
			}

			.text {
				font-size: 20rpx;
				position: absolute;
				// color: var(--price-color);
				top: 0;
				left: 0;

				p {
					margin: 10rpx;
				}
			}
		}
	}

	.hot {
		background-color: #fff;

		.item {
			box-sizing: border-box;
			padding: 8px 16px;
			color: #323233;
			font-size: 12px;
			background-color: #fafafa;
			height: 104px;
			margin-bottom: 16rpx;
			// position: relative;
		}

		.card_left {
			margin-right: 20rpx;
			float: left;

			.van-image {
				image {
					width: 176rpx;
					height: 176rpx;
				}
			}
		}

		.van-card_right {
			.title :nth-child(1) {
				max-height: 64rpx;
				font-weight: 500;
				line-height: 58rpx;
				font-size: 42rpx;
			}

			.title :nth-child(2) {
				height: 80rpx;
				max-height: 200rpx;
				line-height: 80rpx;
			}

			.pri {
				line-height: 40rpx;
				color: var(--price-color);
			}
		}
	}

	.srcoll_view {
		width: 100%;
		display: flex;
		background-color: #fff;
		margin-bottom: 35rpx;
	}

	.scroll_item {
		width: 85%;
		margin-right: 30rpx;

		.text2 {
			font-size: 30rpx;
		}

		.text3 {
			color: var(--price-color);
		}

		.view {
			margin: 20rpx 0;
			font-size: 32rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 600rpx;
			// vertical-align: middle;
		}

		image {
			width: 600rpx;
			height: 400rpx;
		}
	}
}
</style>
